.sidebar {
  @apply !-flex-none -relative;
  --gutter-width: 1px;
  --sidebar-duration: 200ms;
}
.has-sidebar-animation .sidebar {
  @apply -transition-[width,margin] -duration-[--sidebar-duration];
}
.sidebar-left.is-collapsed {
  @apply --ml-[--gutter-width];
}
.sidebar-right.is-collapsed {
  @apply --mr-[--gutter-width];
}
.sidebar.is-expanded.is-animating > *,
.sidebar.is-collapsed > * {
  @apply -hidden;
}
.sidebar.is-collapsed > .sidebar-gutter {
  @apply !-flex;
}

.sidebar-gutter {
  @apply -w-[--gutter-width] -absolute -left-full -top-0 -bottom-0;
}
.sidebar-right > .sidebar-gutter {
  @apply -right-full -left-auto;
}
.is-collapsed > .gutter > .gutter-toggle > span {
  @apply --rotate-180;
}
.sidebar-gutter::before {
  @apply -opacity-0 -rounded-full;
}
.sidebar-gutter:hover::before {
  @apply -opacity-100 -w-2;
}
.is-expanded .sidebar-gutter.gutter-border::before {
  @apply -opacity-100;
}

.is-sidebar-resizing {
  @apply -cursor-col-resize;
}
